Stop the frame jumping when a reader switches page - #50
Merged
Conversation
The bar landed on three pages that centre in three different containers - 64rem here, 1180px on Learn, 62rem on Controls - so the brand, the heading and the first card moved sideways on every switch. Three widths read as three sites, which is the opposite of what a shared bar is for. One column now: 1180px with a 24px gutter, so 1132px of content on all three. The masthead joins the bar as a shared block - the full-bleed header, its .inner, the eyebrow, the h1 scale and the lede - so this page gains the gradient band the learning path already had. Only the words differ now; the note about the missing playground button and the smaller lede the packages section uses are still this page's own. <body> gives up its side padding, because the gutter has to belong to the containers for a full-bleed header to reach the window edge. --wide stops being 64rem and becomes that one column. The block no longer reads --family-* tokens. With one column everywhere there is nothing left for a page to vary, so it carries the two numbers itself and is self-contained - one less way for a copy to drift. Two things the measuring turned up: the eyebrow was uppercased, so every page shouted ABAP2UI5, which is the one place a page must not get its own name wrong; and the results grid asked for a 23rem minimum track, which a 390px screen cannot give once the gutter is 24px - it pushed the page 2px sideways, and every card grid here now guards its minimum with min(…, 100%). Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014QKMsbCiREgnpdfVvQYsa2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The shared bar shipped onto three pages that centre in three different containers — 64rem here, 1180px on Learn, 62rem on Controls. So the brand, the heading and the first card all moved sideways on every switch. Three widths read as three sites, which is the opposite of what a shared bar is for.
One column
1180px with a 24px gutter — 1132px of content on all three pages. Learn's width, because it was the widest and this page was on the narrow side.
--widestops being 64rem and becomes that one column.The masthead joins the bar as a shared block: the full-bleed
<header>, its.inner, the eyebrow, theh1scale and the lede. This page gains the gradient band the learning path already had, so the top looks the same wherever you arrive. Only the words differ now — the note about the missing Playground button, and the smaller lede the packages section uses, are still this page's own.<body>gives up its side padding: the gutter has to belong to the containers for a full-bleed header to reach the window edge, somainandfootercarry it instead.The block no longer reads
--family-width/--family-gutter/--family-bleed. With one column everywhere there is nothing left for a page to vary, so it carries the two numbers itself and is fully self-contained — one less way for a copy to drift.Two things the measuring turned up
text-transform: uppercaseon.brandrenderedabap2UI5 · samples-stackas ABAP2UI5 · SAMPLES-STACK on every one of the three pages. That is the one place a page must not get its own name wrong, so the transform is gone and a comment says why.repeat(auto-fill, minmax(23rem, 1fr))asks for a 368px track; a 390px screen with a 24px gutter has 342px to give, so the page scrolled 2px sideways — the one regression the wider gutter introduced, and caught by the same pass that measured the alignment. Every card grid here now guards its minimum withmin(…, 100%).Verification
Measured in Chromium at 1440px on all three pages:
.family-brand, the eyebrow, theh1, the three-pages strip and the footer text now all start at x = 154 on every page, and theh1computes to 40px on every page. Before, the three pages disagreed on all five.Re-ran the full pass — light and dark, 1280px and 390px, all three pages: right page marked, exactly one marker per block, no sideways scrolling anywhere (the 2px was the last one), no console errors.
check:web,check:proseandcheck:family-navpass, and the shared block is byte-identical across the three repositories (220 lines, verified).Generated by Claude Code